<script>
import personMenu from "../pages/personMenu.vue";
import {axiosGetPersonInfo, axiosSetPersonInfo} from "../api";

export default {
  name: "personPrivacy",
  data() {
    return {
      gender:false,
      label:false,
      introduction:false,
      gender_hidden: 0,
      label_hidden: 0,
      introduction_hidden: 0
    }
  },
  beforeMount() {
    this.getPersonInfo();
    console.log(this.gender_hidden);
  },
  methods: {
    async getPersonInfo() {
      let result = await axiosGetPersonInfo({account: this.account, password: this.password});
      if (result.status === 200) {
        this.gender = result.data.genderHidden;
        this.label = result.data.labelHidden;
        this.introduction = result.data.introductioHidden;
      }
    },
    setPersonInfo() {
      axiosSetPersonInfo({account: this.account, password: this.password, type: "gender_hidden", value: this.gender_hidden});
      axiosSetPersonInfo({account: this.account, password: this.password, type: "label_hidden", value: this.label_hidden});
      axiosSetPersonInfo({account: this.account, password: this.password, type: "introduction_hidden", value: this.introduction_hidden});
    }
  },
  watch:{
    gender:{
      handler(){
        if (this.gender){
          this.gender_hidden = 1;
        }else{
          this.gender_hidden = 0;
        }
      }
    },
    label:{
      handler(){
        if (this.label){
          this.label_hidden = 1;
        }else{
          this.label_hidden = 0;
        }
      }
    },
    introduction:{
      handler(){
        if (this.introduction){
          this.introduction_hidden = 1;
        }else{
          this.introduction_hidden = 0;
        }
      }
    }
  },
  components: {personMenu}
}
</script>

<template>
  <div id="personPrivacy">
    <div class="person-privacy-box">
      <el-col :lg="5" :md="6" :sm="6" :xl="4" :xs="8">
        <div class="grid-content">
          <personMenu/>
        </div>
      </el-col>
      <el-col :lg="19" :md="18" :sm="18" :xl="20" :xs="16">
        <div class="grid-content bg-purple">
          <div class="privacy">
            <p>隐私设置</p>
            <div class="privacy-box">
              <div class="privacy-info">
                <p>是否可见</p>
                <ul class="privacy-option">
                  <li>
                    <el-checkbox v-model:checked="gender">性别</el-checkbox>
                  </li>
                  <li>
                    <el-checkbox  v-model:checked="label">个性标签</el-checkbox>
                  </li>
                  <li>
                    <el-checkbox  v-model:checked="introduction">简介</el-checkbox>
                  </li>
                </ul>
              </div>
              <div class="privacy-change">
                <el-button @click="setPersonInfo">保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<style scoped src="../style/person-privacy.css">

</style>